/*
 * ResultTableView 数据分析页面表格
 */
import QtQuick 2.14
import QtQuick.Controls 2.14
import Qt.labs.qmlmodels 1.0
import QtGraphicalEffects 1.14

Item {
    id: root

    /* property 定义开始 */
    // 表格数据
    property var tableModels:[
        {"孔位": "1", "样本名称": "1", "检测类型": "1", "荧光染料": "1", "CT值": "1", "浓度": "1", "样本浓度均值": "1"},
        {"孔位": "1", "样本名称": "1", "检测类型": "1", "荧光染料": "1", "CT值": "1", "浓度": "1", "样本浓度均值": "1"},
        {"孔位": "1", "样本名称": "1", "检测类型": "1", "荧光染料": "1", "CT值": "1", "浓度": "1", "样本浓度均值": "1"},
        {"孔位": "1", "样本名称": "1", "检测类型": "1", "荧光染料": "1", "CT值": "1", "浓度": "1", "样本浓度均值": "1"},
        {"孔位": "1", "样本名称": "1", "检测类型": "1", "荧光染料": "1", "CT值": "1", "浓度": "1", "样本浓度均值": "1"},
        {"孔位": "1", "样本名称": "1", "检测类型": "1", "荧光染料": "1", "CT值": "1", "浓度": "1", "样本浓度均值": "1"},
        {"孔位": "1", "样本名称": "1", "检测类型": "1", "荧光染料": "1", "CT值": "1", "浓度": "1", "样本浓度均值": "1"},
        {"孔位": "1", "样本名称": "1", "检测类型": "1", "荧光染料": "1", "CT值": "1", "浓度": "1", "样本浓度均值": "1"},
        {"孔位": "1", "样本名称": "1", "检测类型": "1", "荧光染料": "1", "CT值": "1", "浓度": "1", "样本浓度均值": "1"},
        {"孔位": "1", "样本名称": "1", "检测类型": "1", "荧光染料": "1", "CT值": "1", "浓度": "1", "样本浓度均值": "1"}
    ]
    // 横向表头高
    property int horizontalHeaderHeight: 32
    // 反应板列数
    property int plateColCount: 4
    // 表头数据
    property var horHeaderData: ["孔位", "样本名称", "检测类型", "荧光染料", "CT值", "浓度", "样本浓度均值"]
    // hover事件
    property bool isHover: true

    // 私有属性
    // 表格数据
    property var _tableModel: root.tableModels
    /* property 定义结束 */

    Rectangle {
        anchors.fill: parent
        color: "#C3FFFFFF"
        clip: true
        border.width: 0

        layer.enabled: true
        layer.effect: OpacityMask {
            maskSource: Rectangle {
                width: root.width
                height: root.height
                radius: 12
            }
        }

        // 横向表头
        Item {
            id: horizontalHeader
            width: parent.width
            height: horizontalHeaderHeight
            anchors.top: parent.top

            Row {
                spacing: 0

                Repeater {
                    model: plateColCount

                    Item {
                        width: horizontalHeader.width / plateColCount
                        height: horizontalHeader.height
                        clip: true

                        Text {
                            id: headerText
                            anchors.fill: parent
                            text: qsTr(root.horHeaderData[index])
                            anchors.centerIn: parent
                            font.pixelSize: 16
                            font.family: "Alibaba PuHuiTi"
                            color: "#222"
                            clip: true
                            horizontalAlignment: Text.AlignHCenter
                            verticalAlignment: Text.AlignVCenter
                            elide: Text.ElideRight

                            // 嵌套Text，当此Text宽度超过父元素Text宽度则视为溢出，显示tooltip
                            Text {
                                id: innerHeaderText
                                visible: false
                                text: parent.text
                                font.family: parent.font.family
                                font.pixelSize: parent.font.pixelSize
                            }

                            ToolTip {
                                id: headerTextToolTip
                                text: headerText.text
                            }

                            // 鼠标移入显示ToolTip
                            MouseArea {
                                enabled: root.isHover
                                anchors.fill: parent
                                hoverEnabled: isHover
                                onEntered: {
                                    headerTextToolTip.visible = (headerText.width < innerHeaderText.width)
                                }
                                onExited: {
                                    headerTextToolTip.visible = false
                                }
                            }
                        }

                        // 下边框
                        Canvas {
                            anchors.fill: parent
                            antialiasing: true
                            onPaint: {
                                var ctx = getContext("2d")
                                ctx.clearRect(0, 0, width, height)
                                ctx.strokeStyle = "#FF999999"
                                ctx.lineWidth = 2
                                ctx.beginPath()
                                ctx.moveTo(0, height)
                                ctx.lineTo(width, height)
                                ctx.stroke()
                            }
                        }

                        // 左边框
                        Canvas {
                            anchors.fill: parent
                            visible: index !== 0
                            antialiasing: true
                            onPaint: {
                                var ctx = getContext("2d")
                                ctx.clearRect(0, 0, width, height)
                                ctx.strokeStyle = "#FF999999"
                                ctx.lineWidth = 2
                                ctx.beginPath()
                                ctx.moveTo(0, 0)
                                ctx.lineTo(0, height)
                                ctx.stroke()
                            }
                        }
                    }
                }
            }
        }

        // 表格
        // 表格部分
        TableView {
            id: tableContent
            width: parent.width
            height: parent.height - horizontalHeaderHeight
            anchors {
                top: parent.top
                topMargin: horizontalHeaderHeight
            }
            clip: true
            boundsBehavior: Flickable.StopAtBounds
            columnSpacing: 0
            rowSpacing: 0

            columnWidthProvider: function(column){
                return horizontalHeader.width / root.plateColCount
            }

            rowHeightProvider: function(row){
                return root.horizontalHeaderHeight
            }

            model: TableModel {
                id: tableModelCon

                TableModelColumn {display: "样本名称"}
                TableModelColumn {display: "检测类型"}
                TableModelColumn {display: "荧光染料"}
                TableModelColumn {display: "CT值"}
                TableModelColumn {display: "浓度"}
                TableModelColumn {display: "孔位"}
                TableModelColumn {display: "样本浓度均值"}

                rows: _tableModel
            }

            delegate: Item {
                width: tableContent.columnWidthProvider(column)
                height: tableContent.rowHeightProvider(row)

                Label {
                    anchors.centerIn: parent
                    text: display
                    font.pixelSize: 16
                    color: "#FF222222"
                }

                // 下边框
                Canvas {
                    anchors.fill: parent
                    antialiasing: true
                    onPaint: {
                        var ctx = getContext("2d")
                        ctx.clearRect(0, 0, width, height)
                        ctx.strokeStyle = "#FF999999"
                        ctx.lineWidth = 2
                        ctx.beginPath()
                        // 下边框
                        ctx.moveTo(0, height)
                        ctx.lineTo(width, height)
                        ctx.stroke()
                    }
                }
            }

            // 事件
            onWidthChanged: {
                tableContent.forceLayout()
            }

            onHeightChanged: {
                tableContent.forceLayout()
            }
        }
    }
}
